<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      :title="$t('pageUserManagement.viewPrivilegeRoleDescriptions')"
      name="1"
    >
      <el-table ref="tableRef" :data="tableData" style="width: 100%">
        <el-table-column
          prop="description"
          label="Privilege"
          width="200"
          column-key="description"
        />
        <el-table-column
          prop="administrator"
          label="Administrator"
          width="200"
          column-key="administrator"
        >
          <template #default="scope">
            <el-icon v-if="scope.row.administrator" :size="20">
              <check />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="operator"
          label="Operator"
          width="200"
          column-key="operator"
        >
          <template #default="scope">
            <el-icon v-if="scope.row.operator" :size="20">
              <check />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="readonly"
          label="Readonly"
          width="200"
          column-key="readonly"
        >
          <template #default="scope">
            <el-icon v-if="scope.row.readonly" :size="20">
              <check />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="noaccess"
          label="Noaccess"
          width="200"
          column-key="noaccess"
        >
          <template #default="scope">
            <el-icon v-if="scope.row.noaccess" :size="20">
              <check />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup lang="ts">
import { Check } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

const i18n = useI18n();
const activeNames = ref('1');

const tableData = computed(() => {
  return [
    {
      description: i18n.t(
        'pageUserManagement.tableRoles.configureComponentsManagedByThisService',
      ),
      administrator: true,
      operator: true,
      readonly: false,
      noaccess: false,
    },
    {
      description: i18n.t(
        'pageUserManagement.tableRoles.configureManagerResources',
      ),
      administrator: true,
      operator: false,
      readonly: false,
      noaccess: false,
    },
    {
      description: i18n.t(
        'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount',
      ),
      administrator: true,
      operator: true,
      readonly: true,
      noaccess: false,
    },
    {
      description: i18n.t(
        'pageUserManagement.tableRoles.configureUsersAndTheirAccounts',
      ),
      administrator: true,
      operator: false,
      readonly: false,
      noaccess: false,
    },
    {
      description: i18n.t(
        'pageUserManagement.tableRoles.logInToTheServiceAndReadResources',
      ),
      administrator: true,
      operator: true,
      readonly: true,
      noaccess: false,
    },
  ];
});
</script>
